$(function () {
  const layer = layui.layer
  initSrt()
  function initSrt() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        console.log(res)
        const htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
      },
    })
  }

  let indexAdd = null
  $('#btn-add').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      area: ['500px', '250px'],
      title: '添加文章分类',
      content: $('#dialog-add').html(),
    })
  })

  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/my/article/addcates',
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) return layer.msg('添加失败')
        initSrt()
        layer.msg('添加成功')
        layer.close(indexAdd)
      },
    })
  })

  let indexEdit = null
  //通过事件委托把编辑按钮的点击事件，绑定给当前真实DOM
  $('tbody').on('click', '#btn-edit', function (e) {
    indexEdit = layer.open({
      type: 1,
      title: '修改文章分类',
      area: ['500px', '250px'],
      content: $('#dialog-edit').html(),
    })

    //根据当前数据条目的ID 发起请求获取该词条
    //在点击事件当中，获取到当前 编辑按钮对应的D ，用于发送请求
    let id = $(this).attr('data-id')
    console.log(id)
    //发送ajax请求，注意：需要在url接口后面拼接参数
    //并且在请求成功之后使用form.val快速赋值
    $.ajax({
      method: 'GET',
      url: `/my/article/cates/${id}`,
      success: function (res) {
        //通过 form.val('值',数据对象) 快速赋值 => 通过给form表单设置 lay-filter='值'
        // form.val()的使用注意事项:
        // 需要在对应的表单设置 lay-filter =”值“
        // 需要在使用该方法之前，去定义 form 模块 => form = layui.form
        // 需要在调用的时候 form.val("lay-filter里面定义好的值，需要传入到表单的数据对象)
        form.val('form-edit', res.data)
      },
    })
  })

  //通过事件代理，把forEdit的submit事件代理给 body
  $('body').on('submit', '#form-Edit', function (e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/my/article/updatecate',
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg(res.message)
        }

        //关闭弹出框
        layer.close(indexEdit)
        layer.msg(res.message)
        initSrt()
      },
    })
  })

  //删除某条分类列表数据
  $('tbody').on('click', '#btn-delete', function () {
    let id = $(this).attr('data-id')
    layer.confirm(
      '真的删除这条内容吗？',
      { icon: 3, title: '提示' },
      function (index) {
        $.ajax({
          method: 'GET',
          url: `/my/article/deletecate/${id}`,
          success: function (res) {
            if (res.status !== 0) return layer.msg(res.message)

            layer.msg(res.message)
            //重新渲染列表内容
            initSrt()
          },
        })

        layer.close(index)
      }
    )
  })
})
